<template>
	<view class="loading-spinner" :class="{ 'loading-overlay': overlay }">
		<view class="spinner-container">
			<view class="spinner" :style="{ width: size, height: size }"></view>
			<text v-if="text" class="loading-text">{{ text }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'LoadingSpinner',
		props: {
			// 是否显示遮罩层
			overlay: {
				type: Boolean,
				default: false
			},
			// 加载文本
			text: {
				type: String,
				default: ''
			},
			// 尺寸
			size: {
				type: String,
				default: '60rpx'
			},
			// 颜色
			color: {
				type: String,
				default: '#1890ff'
			}
		}
	}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.loading-spinner {
	display: flex;
	justify-content: center;
	align-items: center;
	
	&.loading-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.8);
		z-index: 9999;
		backdrop-filter: blur(2px);
	}
}

.spinner-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: $spacing-md;
}

.spinner {
	border: 4rpx solid rgba(24, 144, 255, 0.2);
	border-top-color: var(--color, #{$primary-color});
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

.loading-text {
	font-size: $font-size-sm;
	color: $text-secondary;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
</style>